<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>做练习</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="./css/do_exercise.css"/>

</head>
<body>
<div id="wrap">
    <h3 class="title">音频材料</h3>
    <p class="nameEn">{{scenario_name_en}}</p>
    <p class="nameCn">{{scenario_name_cn}}</p>
    <div class="audioDivBg">
        <img class="audioBg" src="./img/audioBg@2x.png" alt="">
        <div class="button">
            <div class="play" data-type="play">
                <!--<img class="button" src="./img/play@2x.png" data-src="./img/stop@2x.png">-->
            </div>
        </div>

    </div>
    <audio id="audio" :src="scenario_audio_url" width="0" height="0" controlsList="nodownload"></audio>
    <div class="footer">
        <div class="time clearfix">
            <span class="current-time">00:00</span>
            <div class="circle">
                <span class="loading"></span>
                <span id="small" data="pause"></span>
            </div>
            <span class="duration-time">00:00</span>
        </div>
    </div>
    <div class="speedBtn">
        <span class="slow">播放速度: 慢 0.8x </span>
        <span class="normal">播放速度: 中 1x</span>
        <span class="fast">播放速度: 快 1.2x</span>
    </div>
    <div class="answerBtn" @click="ToanswerFun(id)">
        开始答题
    </div>

</div>
</body>
</html>

<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/basis.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" charset="utf-8"></script>
<script src="js/vue-router.js" charset="utf-8"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var url = location.search;
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = ( strs[i].split("=")[1] );
        }
        console.log(theRequest); //此时的theRequest就是我们需要的参数；
    }
    ;


    var vm = new Vue({
        el: "#wrap",
        data: {
            id:theRequest.id,
            scenario_name_en: '',
            scenario_name_cn: '',
            scenario_audio_url: '',
        },
        methods: {
            HttpDataFun: function () {
                this.$http.post(URL + '/tpo/exercise/categories/scenario/exec/audio/' + theRequest.id, {}).then(function (res) {
                    console.log(res.data)
                    if (res.data.status == 200) {
                        this.scenario_name_en = res.data.data.scenario_name_en;
                        this.scenario_name_cn = res.data.data.scenario_name_cn;
                        this.scenario_audio_url = res.data.data.scenario_audio_url;
                    }
                    if (res.data.status == 400) {
                        alert(res.data.message)
                    }
                    if (res.data.status == 500) {
                        alert(res.data.message)
                    }
                }, function () {

                })
            },
            ToanswerFun:function (data) {
                window.location.href = 'do_exercise_question.html?id=' + data;
            }
        }

    })
    vm.HttpDataFun();

    $(function () {
//改变播放速率

        $('.slow').click(function() {
            $("#audio")[0].playbackRate = 1.0;
            $('.slow').css('display','none');
            $('.normal').css('display','inline');
            $('.fast').css('display','none');
        });
        $('.normal').click(function() {
            $("#audio")[0].playbackRate = 1.2;
            $('.slow').css('display','none');
            $('.normal').css('display','none');
            $('.fast').css('display','inline');
        });
        $('.fast').click(function() {
            $("#audio")[0].playbackRate = 0.8;
            $('.slow').css('display','inline');
            $('.normal').css('display','none');
            $('.fast').css('display','none');
        });


        var durationTime, currentTime, left;
        var width = $(".circle").width();
        var num = 0;
        $(".play").click(function () {
            var type = $(".play").attr("data-type");
            if (type == "play") {
                document.getElementById("audio").play();
                $(".play").attr("data-type", "pause");
            } else {
                document.getElementById("audio").pause();
                $(".play").attr("data-type", "play");
            }
            $(this).toggleClass("cur");
            getTotalTime();
        })

        setInterval(function () {
            getCurrentTime()
        }, 500);

        // 获取歌曲总时间
        function getTotalTime() {
            timer = setInterval(function () {
                durationTime = document.getElementById("audio").duration;
                if (!isNaN(durationTime)) {
                    $(".duration-time").html(setTime(durationTime));
                    clearInterval(timer);
                }
            }, 500);
        }

        // 获取歌曲当前的播放时间
        function getCurrentTime() {
            currentTime = document.getElementById("audio").currentTime;
            $(".current-time").html(setTime(currentTime));
            left = currentTime / durationTime * width;
            $(".circle #small").css("left", left);
            $(".circle .loading").css("width", left + "px");
            if (currentTime == durationTime) {
//                num++;
//                if (num > len - 1) {
//                    num = len - 1;
//                    return false;
//                }
                document.getElementById("audio").pause();
                $(".play").attr("data-type", "pause");
                getTotalTime();
            }
        }

        // 时间格式化
        function setTime(x) {
            var m = Math.floor(x / 60);
            var s = x.toFixed(0) - m * 60;
            m = m < 10 ? "0" + m : m;
            s = s < 10 ? "0" + s : s;
            return m + ":" + s;
        }

        // 拖拽事件
        var touch = document.getElementById("small");
        touch.addEventListener("touchstart", handleStart, false);
        touch.addEventListener("touchmove", handleMove, false);
        touch.addEventListener("touchend", handleEnd, false);
        var x1, y1, oldTime, newTime, olfLeft, newLeft;

        function handleStart(e) {
            e.preventDefault();
            var touches = e.changedTouches;
            x1 = touches[0].pageX;
            y1 = touches[0].pageY;
            olfLeft = $("#small").position().left;
            document.getElementById("audio").pause();
        }

        function handleMove(e) {
            e.preventDefault();
            var x2 = e.changedTouches[0].pageX;
            var y2 = e.changedTouches[0].pageY;
            newLeft = x2 - x1;
            nowLeft = olfLeft + newLeft;
            if (nowLeft < 0) {
                nowLeft = 0;
            }
            if (nowLeft > width) {
                nowLeft = width;
            }
            $(".circle .loading").css("width", nowLeft + "px");
            $("#small").css("left", nowLeft + "px");
            var per = nowLeft / width;
            var nowAudioTime = durationTime * per;
            console.log(per);
            console.log("nowAudioTime" + nowAudioTime);
            document.getElementById("audio").currentTime = nowAudioTime;
            console.log(document.getElementById("audio").currentTime);
        }

        function handleEnd(e) {
            touch.removeEventListener("touchmove", handleEnd, false);
            document.getElementById("audio").play();
        }
    })
</script>